<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 500px;
				height: 500px;
				margin: 100px auto;
			}

			span {
				color: white;
				background-color: black;
				width: 50px;
				height: 50px;
				font-size: 40px;
				text-align: center;
				line-height: 50px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div>
			<span class="day"></span>
			<span class="hour"></span>
			<span class="minute"></span>
			<span class="second"></span>
		</div>
		<script type="text/javascript">
			var day = document.querySelector(".day");
			var hour = document.querySelector(".hour");
			var minute = document.querySelector(".minute");
			var second = document.querySelector(".second");

			var inputTime = +new Date("2021/3/11 12:0:0");
			//页面刷新,会等一秒才会运行一次函数,所以在页面刷新后,立刻执行一次函数,然后靠定时器进行间隔执行
			countDown();
			setInterval(countDown, 1000);

			function countDown() {
				var nowTime = +new Date();
				//现在和指定时间的毫秒差/1000	单位变为 秒
				var times = (inputTime - nowTime) / 1000;

				var d = parseInt(times / 60 / 60 / 24); //天
				var h = parseInt(times / 60 / 60 % 24); //时
				var m = parseInt(times / 60 % 60); //分
				var s = parseInt(times % 60); //秒

				day.innerHTML = d;
				hour.innerHTML = h;
				minute.innerHTML = m;
				second.innerHTML = s;

			}
		</script>
	</body>
</html>
